<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>详情页</title>
  <link rel="stylesheet" href="/css/detail.css">
</head>
<body>
  <div class="shortcut"></div>

  <div class="header"></div>

  <div class="breadcrumb-area">
    <div class="layout">
      <a href="/">首页</a>
      &nbsp;&gt;&nbsp;
      <span class="shopTitle"></span>
    </div>
  </div>

  <div class="product layout clearfix">
    <div id="shop"></div>
    <script type="text/html" id="shopTemplate">

      <!--商品图片部分-->
      <div class="f-l">
        <div class="product-gallery">
          <div class="product-gallery-img">
            <img src="{{ product[0].picSrc[0] }}" alt="">
          </div>
          <div class="product-gallery-img-big">
            <img src="{{ product[0].picSrc[0] }}" alt="">
          </div>

          <!-- 商品缩略图-->
          <div class="product-gallery-nav">

            <a href="javascript:void(0)" id="prevProduct"></a>
            <div class="product-gallery-thumbs">
              <ul class="thumbs-nav">
                {{ each product[0].picSrc item }}

                <li>
                  <a href="javascript:void (0)" class="current">
                    <img src="{{ item }}" alt="">
                  </a>
                </li>
                {{ /each }}
              </ul>
            </div>
            <a href="javascript:void(0)" id="nextProduct"></a>
          </div>
        </div>
      </div>
      <!--/.商品图片部分-->

      <!--商品信息部分-->
      <div class="f-r">
        <div class="product-property clearfix">
          <div class="product-property-show relative">
            <!--商品信息-->
            <div class="product-property-meta">
              <h1>数据加载中...</h1>
              <span>{{ subTitle }}</span>
            </div>
            <!--/.商品信息-->

            <!--价格信息-->
            <div class="product-property-info">
              <!--价格-->
              <div class="product-property-info-list clearfix">
                <label>价&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格</label>
                <div class="product-property-info-price">
                  <em>¥</em><span class="price">3999.00</span>
                </div>
              </div>
              <!--优惠券-->
              <div class="product-property-info-list clearfix">
                <label>优&nbsp;&nbsp;惠&nbsp;&nbsp;券</label>
                <div>
                  <span class="product-ticket">领券直减10</span>
                  <a href="javascript:void(0)" class="product-ticket-link">立即领取&nbsp;&gt;</a>
                </div>
              </div>
              <!--促销-->
              <div class="product-property-info-list clearfix">
                <label>促&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;销</label>
                <div class="product-prom" id="prom">

                </div>
              </div>
            </div>
            <!--/.价格信息-->

            <!--服务说明-->
            <div class="product-service clearfix">
              <label>服务说明</label>

              <div class="f-l">
                <div class="product-service-address clearfix">
                  <div class="product-pulldown f-l">
                    <div class="">
                      <a href="javascript:void(0)">
                        四川&nbsp;&gt;&nbsp;成都&nbsp;&gt;&nbsp;武侯区
                      </a>
                    </div>
                  </div>

                  <div class="product-service-address-prompt">
                  <span>
                    <span class="red">现货</span>，今天21:59前付款，预计6月21日(周日)送达
                  </span>
                    <em></em>
                  </div>

                  <div class="clearfix"></div>

                  <div class="product-service-address-desc clearfix">
                    <ul>
                      <li><span class="iconfont">&#xe507; </span>已满48元已免运费</li>
                      <li><span class="iconfont">&#xe507; </span>由华为商城负责发货，并提供售后服务</li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
            <!--/.服务说明-->

            <!--商品编号-->
            <div class="product-description clearfix">
              <label>商品编码</label>
              <div class="f-l shopid"></div>
            </div>
            <!--/.商品编号-->

            <!--商品规格-->
            <div class="product-sku clearfix">
              <!--选择颜色-->
              <div class="product-choose product-color">
                <label>选择颜色</label>
                <div class="product-choose-detail">
                  <ul id="colors">
                    数据加载中...
                  </ul>
                </div>
              </div>

              <!--选择版本-->
              <div class="product-choose">
                <label>选择版本</label>
                <div class="product-choose-detail">
                  <ul id="model">
                    数据加载中...
                  </ul>
                </div>
              </div>


              <!--选择套餐-->
              <div class="product-choose">
                <label>选择套餐</label>
                <div class="product-choose-detail">
                  <ul id="bundlePackage">
                    数据加载中...
                  </ul>
                </div>
              </div>
            </div>
            <!--/.商品规格-->

            <!--保障服务-->
            <div class="clearfix">
              <label>保障服务</label>
              <div class="f-l">
                <div class="product-pulldown f-l">
                  <a href="javascript:void(0)">
                    <span>碎屏(含后盖)服务宝1年</span>
                    <span>&nbsp;¥239.2</span>
                  </a>
                </div>
                <div class="product-pulldown f-l">
                  <a href="javascript:void(0)">
                    <span>延长服务宝1年</span>
                    <span>&nbsp;¥134.4</span>
                  </a>
                </div>
              </div>
            </div>
            <!--/.保障服务-->

            <!--分期免息-->
            <div class="clearfix">
              <label>分期免息</label>
              <div class="f-l">
                <div class="product-pulldown f-l">
                  <a href="javascript:void(0)">
                    <span>掌上生活分期</span>
                  </a>
                </div>
                <div class="product-pulldown f-l">
                  <a href="javascript:void(0)">
                    <span>花呗分期</span>
                  </a>
                </div>
              </div>
            </div>
            <!--/.分期免息-->

            <!--推荐商品-->
            <div class="clearfix">
              <label>推&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;荐</label>
              <div class="product-recommend">
                <ul class="clearfix">
                  <li>
                    <a href="javascript:void (0)">荣耀30</a>
                  </li>
                  <li>
                    <a href="javascript:void (0)">荣耀30S</a>
                  </li>
                </ul>
              </div>
            </div>
            <!--/.推荐商品-->

            <!--已选择商品-->
            <div class="clearfix">
              <div class="product-selected-info">
                <label>已选择商品：</label>
                <span class="selectedInfo">幻夜黑 / Pro 8GB+128GB / 官方标配</span>
              </div>

              <div class="product-operation">
                <div class="selected-num">
                  <input type="text" placeholder="1" value="1" id="selectedNum">
                  <div class="selected-btn">
                    <a href="javascript:void(0)" id="selectedPlus">+</a>
                    <a href="javascript:void(0)" id="selectedMinus" class="disabled">-</a>
                  </div>
                </div>

                <div class="selected-button-main">
                  <a href="javascript:void (0)" class="product-btn0">加入购物车</a>
                  <a href="javascript:void (0)" class="product-btn1">立即下单</a>
                </div>
              </div>

            </div>
            <!--/.已选择商品-->
          </div>
        </div>
      </div>
      <!--/.商品信息部分-->
    </script>

    <script type="text/html" id="modelTemplate">
      {{ each model item}}
      <li data-modelid="{{ item.modelId }}"
          class="{{item.able? '': 'disabled'}}{{ item.modelId == selectedModel ? 'selected' : ''}}"
          data-index="{{ $index }}">
        <a href="javascript:void(0);"><p><span>{{item.version}} {{ item.memory }}</span></p></a>
      </li>
      {{ /each }}
    </script>

    <script type="text/html" id="packageTemplate">
      {{ each bundlePackage item}}
      <li data-packageId="{{ item.packageID }}"
          class="{{ item.able? '': 'disabled' }}{{ item.packageID == selectedBundlePackage ? 'selected' : ''}}"
          data-index="{{ $index }}">
        <a href="javascript:void(0);"><p><span>{{item.package_name}}</span></p></a>
      </li>
      {{ /each }}
    </script>

    <script type="text/html" id="colorTemplate">
      {{ each product item}}
      <li data-colorId={{ item.colorId }} data-index="{{ $index }}">
        <a href="javascript:void(0);">
          <img src="{{item.colorSrc}}" alt="">
          <p><span>{{item.color}}</span></p>
        </a>
      </li>
      {{/each}}
    </script>

    <script type="text/html" id="promTemplate">
      {{ each prom  item}}
      {{ if item.name === "赠品"}}
      <div class="product-prom-item gift">
        <em class="tag">{{ item.name }}</em>
        <div class="product-prom-con">
          <div class="product-parts-list">
            {{ each item.content gift}}
            <a href="javascript:void(0)" class="{{ $index === gift.length-1 ? 'last-shop':'first-shop'}}">
              <img src="{{gift.imgSrc}}" alt="{{ gift.name }}" title="{{ gift.name }}">
            </a>
            {{ /each }}
            <a href="javascript:void(0)">去选择&nbsp;></a>
          </div>
        </div>
      </div>
      {{ else }}
      <div class="product-prom-item">
        <em class="tag">{{item.name}}</em>
        <div class="product-prom-con">
          <span>{{item.content}}</span>
        </div>
      </div>
      {{ /if }}
      {{ /each }}


      <div class="product-prom-item prom-more">
        <em class="tag">商品赠券</em>
        <div class="product-prom-con">
          <span>赠手机摄影课程/荣耀手表券包</span>
        </div>
      </div>

      <div class="product-prom-item prom-more">
        <em class="tag">分期免息</em>
        <div class="product-prom-con">
          <span>银联、掌上生活、花呗、工行分期支付可享免息（免息活动适用于单款免息商品订单，含多款商品订单仅在免息活动一致时可享用） </span>
        </div>
      </div>

      <div class="product-prom-item prom-more">
        <em class="tag">赠送积分</em>
        <div class="product-prom-con">
          <span>赠手机摄影课程/荣耀手表券包</span>
        </div>
      </div>

      <div class="product-prom-item prom-less">
        <p class="f-l">
          <em class="tag">商品赠券</em>
          <em class="tag">分期免息</em>
          <em class="tag">赠送积分</em>
        </p>

        <div class="expand-prom f-r">
          展开促销
        </div>
      </div>
    </script>

  </div>

  <div class="line"></div>

  <footer class="footer"></footer>

  <div class="sidebar"></div>

  <div class="add-cart">
    <div class="mask"></div>
    <div class="add-box">
      <div>
        <div class="add-box-header">
          <a href="javascript:void (0)" class="box-close"></a>
        </div>

        <div class="add-box-body">
          <div class="add-box-body-content">
            <span>荣耀30 Pro 50倍超稳远摄 超感光高清夜拍 双模5G 麒麟990 5G SoC 8GB+128GB 钛空银</span> 成功加入购物车!
          </div>
          <div class="add-box-body-button">
            <a href="javascript:void (0)" class="box-close">在逛逛</a>
            <a href="/cart.html">去结算</a>
          </div>
        </div>
      </div>
    </div>
  </div>


  <script src="/libs/require/require.js" data-main="js/detail"></script>

</body>
</html>
